<script type="text/javascript" src="/js/mac/combo_autoCp.js"></script>
<script type="text/javascript">
$(function(){
	var dd = [{
		code: 'dax',
		name: 'Henry Dax'
	},{
		code: 'jerry',
		name: 'Jerry Pang'
	},{
		code: 'tony',
		name: 'Tony Wang'
	},{
		code: 'jenny',
		name: 'Jenny Huang'
	},{
		code: 'daniel',
		name: 'Daniel Berger'
	}];
	var cfg = {
		keyField: 'code',
		displayField: 'name',
		equals: function(x, k, v, dd){
			//return x && x.indexOf(v)>-1;
			return x && x.toLowerCase().indexOf(v.toLowerCase())>-1; 
		},
		multiSelect: false,
		width: 200,
		boxWidth: 200,
		cols : [{
			field: 'code', width: '30%'
		},{
			field: 'name', width: '70%'
		}],
		data: dd
	};
	var cfg1 = $.extend({}, cfg);
	var cb1 = $('#combo1').mac('combo', cfg1);
	cb1.mac('combo_autoCp', {
		by: 'name',
		minChars: 2
	});
	/*
	$('#get1').click(function(){
		alert(cb1.selected);
	});
	$('#set1').click(function(){
		cb1.select(2);
	});
	var cfg2 = $.extend({}, cfg);
	cfg2.multiSelect = true;
	var cb2 = $('#combo2').mac('combo', cfg2);
	$('#get2').click(function(){
		alert(cb2.selected.join(','));
	});
	$('#set2').click(function(){
		cb2.select([2,4]);
	});
	*/
});
</script>
<h3>multiSelect = false (This is a beta version)</h3>
<ul>
	<li>press DOWN to expand combo</li>
	<li>press UP/DOWN move selection.</li>
	<li>press RETURN to pick item.</li>
	<li>enter user name and press TAB to lookup by user name.</li>
</ul>
<div id="combo1" class="combo"></div>
<!--
<h3>multiSelect = true</h3>
<div id="combo2" class="combo"></div><br/>
&nbsp;&nbsp;<button id="get2">get2</button>&nbsp;<button id="set2">set2</button>
-->